import React,{useEffect,useState} from 'react'
import { Descriptions,Row,Col, Button,Tag} from 'antd';
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
import { get } from '../../../util/get';
import EditStoreModal from '../../../components/EditStoreModal';
export default function StoreInfo() {
  const [info,setInfo]=useState([])
  const [v,setV] = useState(false)
  // const navigate =useNavigate()
  const location =useLocation()
  const token = localStorage.getItem('TOKEN')
  useEffect(()=>{
   (async ()=>{
    const res = await  get(`/shop/shop/info/${location.state}`,token)
    // console.log(res,'门店信息');
    setInfo(res.data.data)
   })()
  },[token,location,v])
  return (
    <div style={{'background':'white'}}>
  <Descriptions title={
  <Row>
    <Col span={20}>
    <img alt='照片' width={200} height={200}src={info.image}/>
    </Col>
    <Col span={4}>
      <Button type='primary' onClick={()=>setV(true)}>修改信息</Button>
    </Col>
  </Row>}>
    <Descriptions.Item label="店铺名称">{info.name}</Descriptions.Item>
    <Descriptions.Item label="电话号码">{info.phone}</Descriptions.Item>
    <Descriptions.Item label="地址">{info.address}</Descriptions.Item>
    <Descriptions.Item label="创建时间">{info.createTime}</Descriptions.Item>
    <Descriptions.Item label="状态">
      {
        info.status===1?<Tag color="#4de900">营业中</Tag>:<Tag color="#fbb62e">打烊休息</Tag>
      }
    </Descriptions.Item>
  </Descriptions>
  <EditStoreModal visible={v} setVisible={setV} data={info}></EditStoreModal>
    </div>
  )
}
